<template>
	<view class="dealer">
		<view class="dealer-tabs">
			<tabs :list="tabs" v-model="active" :flex="true"></tabs>
		</view>
		<view class="dealer-content">
			<image src="https://master.shengejiaju.cn/web/static/images/pic-12800.jpg" mode="widthFix" v-if="active==0"></image>
			<image src="https://master.shengejiaju.cn/web/static/images/pic-28800.jpg" mode="widthFix" v-if="active==1"></image>
			<image src="https://master.shengejiaju.cn/web/static/images/pic-49800.jpg" mode="widthFix" v-if="active==2"></image>
		</view>
		<view class="btns">
			<view  @click="FactoryAdd">意向申请</view>
			<view @click="pay" :class="[{'isPay':isPay}]">{{isPay?'支付成功成为经销商':'入驻会员店'}}</view>
		</view>
		
		<!--支付方式-->
		<uni-popup type="bottom" ref="payWay">
			<view class="payWay-box">
				<view class="payWay-tit">
					请选择支付方式 
					<text>
					合计：
					<text>￥<block v-if="active==0">12800</block><block v-if="active==1">28800</block><block v-if="active==2">49800</block></text></text>
				</view>
				<view class="payWay-list">
					<view class="payWay-item" @click="payAgain(1)">
						<image src="https://master.shengejiaju.cn/web/static/icons/ico_wechat.png"></image>
						<view class="pay-name">微信</view>
					</view>
					<view class="payWay-item" @click="payAgain(2)">
						<image src="https://master.shengejiaju.cn/web/static/icons/ico_alipay.png"></image>
						<view class="pay-name">支付宝</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup type="center" ref="qrcodepop">
			<view class="qrcodepop"><image :src="QRcode" mode="widthFix" show-menu-by-longpress></image></view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				tabs: [{title: '专属店'},{title: '独立店'},{title: '旗舰店'}],
				isPay: false,
				QRcode: ''
			};
		},
		methods: {
			FactoryAdd(){
				this.$api.FactoryAdd({type: 1}).then(res => {
					if(res.datas.url){
						this.QRcode = res.datas.url
						this.$nextTick(() => {
							this.$refs.qrcodepop.open()
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '申请成功，请等待客服人员与您联系!',
							duration: 1500
						})
					}
				})
			},
			// 支付
			pay(){
				let _this = this
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '暂不支持H5支付，请移步《家具大师商户版》APP或者小程序支付',
					duration: 2000
				})
				// #endif
				// #ifdef MP-WEIXIN
				_this.isPay = true
				let id
				if(this.active==0){
					id = 2
				}else if(this.active==1){
					id = 3
				}else if(this.active==2){
					id = 6
				}
				uni.login({
					provider: 'weixin',
					success(loginRes) {
						let data = {
							id: id,
							pay_id: 1,
							pay_client: 8,
							client_type: 2,
							code: loginRes.code
						}
						_this.$api.OrderStorePay(data).then(res => {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.datas.timeStamp,
								nonceStr: res.datas.nonceStr,
								package: res.datas.package,
								signType: res.datas.signType,
								paySign: res.datas.paySign,
								success: function (successRes) {
									uni.showToast({
										icon: 'none',
										title: '支付成功，您已成为商家',
										duration: 1500
									})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/my/my'
										})
									},1500)
									_this.isPay = false
								},
								fail: function (err) {
									let msg = err.errMsg
									if(msg.indexOf('cancel')!=-1){
										uni.showToast({
											icon: 'none',
											title: '取消支付',
											duration: 1500
										})
									}else{
										uni.showToast({
											icon: 'none',
											title: '支付失败',
											duration: 1500
										})
									}
									_this.isPay = false
								}
							});
						})
					}
				})
				// #endif
				// #ifdef APP-PLUS
				this.$refs.payWay.open()
				// #endif
			},
			payAgain(type){
				let id
				if(this.active==0){
					id = 2
				}else if(this.active==1){
					id = 3
				}else if(this.active==2){
					id = 6
				}
				let data = {
					id: id,
					pay_id: type,
					pay_client: 2
				}
				this.$api.OrderStorePay(data).then(res => {
					if(type==1){
						uni.showModal({
							title: '温馨提示',
							content: '微信支付暂时无法使用，请使用支付宝支付，感谢您的谅解!',
							showCancel: false
						})
						return false
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.datas.timeStamp,
							nonceStr: res.datas.nonceStr,
							package: res.datas.package,
							signType: res.datas.signType,
							paySign: res.datas.paySign,
							success: function (successRes) {
								console.log(successRes)
								uni.showToast({
									icon: 'none',
									title: '支付成功，您已成为商家',
									duration: 1500
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/my/my'
									})
								},1500)
							},
							fail: function (err) {
								let msg = err.errMsg
								if(msg.indexOf('cancel')!=-1){
									uni.showToast({
										icon: 'none',
										title: '取消支付',
										duration: 1500
									})
								}else{
									uni.showToast({
										icon: 'none',
										title: '支付失败',
										duration: 1500
									})
								}
							}
						});
					}else{
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.datas,
							success: (alipaySuccess) => {
								uni.showToast({
									icon: 'none',
									title: '支付成功，您已成为商家',
									duration: 1500
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/my/my'
									})
								},1500)
							},
							fail: (alipayFail) => {
								uni.showToast({
									icon: 'none',
									title: '支付已取消',
									duration: 1500
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.dealer{
		padding: 90rpx 0 130rpx;
		.dealer-tabs{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			box-shadow: 0 10rpx 10rpx rgba(0,0,0,.1);
			border-top: solid 1px #EEE;
		}
		.dealer-content{
			padding: 20rpx;
			image{
				width: 100%;
				vertical-align: top;
			}
		}
		.btns{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			padding: 20rpx 30rpx;
			background-color: #FFF;
			border-top: solid 1px #EEE;
			view{
				flex: 1;
				text-align: center;
				height: 90rpx;
				line-height: 86rpx;
				border-radius: 50rpx;
				color: #2073F5;
				border: solid 2rpx #2073F5;
				&:last-child{
					color: #FFF;
					background-color: #2073F5;
					margin-left: 20rpx;
				}
				&.isPay{
					opacity: .5;
					pointer-events: none;
				}
			}
		}
		.payWay-box {
			background-color: #FFF;
			padding: 20rpx;
			.payWay-tit{
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;
				font-size: 32rpx;
				padding:0 40rpx 30rpx;
				border-bottom: solid 1px #EEE;
				text{
					text{
						color: #FF0000;
					}
				}
			}
			.payWay-list{
				display: flex;
				align-items: center;
				.payWay-item{
					flex: 1;
					text-align: center;
					image{
						width: 100rpx;
						height: 100rpx;
					}
					view{
						font-size: 30rpx;
						color: #888;
						margin-top: 10rpx;
					}
				}
			}
		}
		.qrcodepop{
			width: 600rpx;
			image{
				width: 100%;
				border-radius: 8rpx;
			}
		}
	}
</style>
